<template>
  <section class="payRule">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" >
        <router-link :to="{name:'PayRule'}" tag="div">返回</router-link>
      </el-button>
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="type_name" label="规则名称" width="120"/>
			<el-table-column prop="remark" label="规则描述" width="150"/>
			<el-table-column prop="is_retreat_name" label="是否可返还" width="100"/>
			<el-table-column prop="type_name" label="缴费方式" width="120"/>
      <el-table-column prop="basic_price" label="基本会费" width="120"/>
      <el-table-column prop="vip_grade_price" label="职务费用" width="120"/>
      <el-table-column prop="vip_rule_name" label="会员级别" width="120"/>
      <el-table-column prop="sort" label="排序" width="120"/>
      <el-table-column prop="updated_at" label="创建时间" width="150"/>
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editorRule(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini"  @click="delPayRule(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<!-- <el-col :span="24" class="footer-bar">
			<div class="page-code"><el-pagination background layout="prev, pager, next" :total="50"></el-pagination></div>
    </el-col> -->

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      :title="dialogTit"
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="80px"  >
        <el-form-item label="会员级别" prop="level" width="100px">
              <div>{{vipName}}</div>
						</el-form-item>
        <!-- <el-form-item label="规则名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item> -->
        <el-form-item label="缴费方式" prop="payMode" label-width="80px">
							<el-select v-model="addForm.payMode" placeholder="请选择">
								<el-option
									v-for="item in payModeOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									:disabled="item.disabled"
									>
								</el-option>
							</el-select>
						</el-form-item>
        <el-form-item label="规则描述">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="是否可返还" label-width="120px">
          <el-radio-group v-model="addForm.canReback">
              <el-radio class="radio" :label="1">是</el-radio>
              <el-radio class="radio" :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
        
        <el-form-item label="缴费标准" style="font-weight:800">
        </el-form-item>
        <el-form-item label="基本会费">
          <el-input v-model="addForm.baseCost" placeholder="单位为元" type="number"></el-input>
        </el-form-item>
        <el-form-item label="职务费用">
          <el-input v-model="addForm.memberCost" placeholder="单位为元" type="number"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addForm.sort" placeholder="排序 从1开始，数值越小越靠前" type="number"></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setPayRule">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			users:[],
      dialogTit:'',
      dialogVisible:false,//编辑状态的弹窗
      addForm:{//弹窗的信息
        // name:'',
        desc:'',
        canReback:'',//是否可返还
        payMode:'',//缴费方式
        exceptPrice:'',//预估价
        memberCost:'',//基本会费
        baseCost:'',//缴费标准
        level:'',//会员等级
        remark:'',
        sort:''
      },
      levelOptions: [],
      payModeOptions:[
                {label:'免费',value:0,disabled:false},
                {label:'一次性',value:1,disabled:false},
                {label:'分期',value:2,disabled:false}
            ],
      vipId:'',//会员级别id
      vipName:'',//会员级别
      payRuleId:''//当前的数据id
		}
  },
  methods: {
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
     newRule(){
      //新增
      this.dialogTit='添加规则'
      this.dialogVisible = true
    },
    editorRule(id){
      this.dialogTit='编辑规则';
      this.payRuleId=id;
      this.getPayRuleDetail();
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    async getUserVipRule(){
            //获取会员等级&缴费规则接口
            const data=await this.$api.getUserVipRule();
            if(data.data.level=='success'){
                this.levelOptions= data.data.data.vip_list
            }
    },
    delPayRule(id){
			//删除缴费规则
			const judge= this.$confirm('删除该缴费规则?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delPayRule({id});
					if(res.data.level=='success'){
						this.getPayRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    async getPayRuleList(){
      //获取缴费方式列表
      const res=await this.$api.getPayRuleList({
        vip_rule_id:this.vipId
      })
      
      if(res.data.level=='success'){
        this.users=res.data.data
      }
    },
    async setPayRule(){
      //设置缴费方式
      const res=await this.$api.setPayRule({
        vip_rule_id:this.vipId,
        basic_price:this.addForm.baseCost,
        vip_grade_price:this.addForm.memberCost,
        type:this.addForm.payMode,
        is_retreat:this.addForm.canReback,
        sort:this.addForm.sort,
        id:this.payRuleId,
        remark:this.addForm.remark,
      })

      if(res.data.level=='success'){
						this.getPayRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
            });
            this.dialogVisible=false
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
    },
    async getPayRuleDetail(){
      //获取缴费详情
      let res=await this.$api.getPayRuleDetail({
        id:this.payRuleId
      })
      if(res.data.level=='success'){
        const data=res.data.data;
        this.addForm.payMode=+data.type;
        this.addForm.remark=data.remark;
        this.addForm.canReback=+data.is_retreat;
        this.addForm.baseCost=data.basic_price;
        this.addForm.memberCost=data.vip_grade_price;
        this.addForm.sort=data.sort;
      }
    },
    initData(){
      this.payRuleId=''
      this.addForm={//弹窗的信息
        // name:'',
        remark:'',
        canReback:'',//是否可返还
        payMode:'',//缴费方式
        exceptPrice:'',//预估价
        memberCost:'',//基本会费
        baseCost:'',//缴费标准
        level:'',//会员等级
        sort:''
      }
    }
  },
  mounted() {
    if(this.$route.query.id){
      this.vipId=this.$route.query.id;
      this.vipName=this.$route.query.vipName
      this.getPayRuleList()
    }
		this.getUserVipRule()
    },
}
</script>
<style lang='scss' scoped>
  .payRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payRule .el-dialog__body{overflow: auto;}
</style>
